<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg height="600" id="chord-diagram" width="600"></svg>
<script>
    // 假设你已经有了数据矩阵，名为 matrix
    const matrix = [
        // 数据矩阵示例
        [11975, 5871, 8916, 2868],
        [1951, 10048, 2060, 6171],
        [8010, 16145, 8090, 8045],
        [1013, 990, 940, 6907]
    ];

    const width = 600;
    const height = 600;
    const innerRadius = Math.min(width, height) * 0.41;
    const outerRadius = innerRadius * 1.1;

    const chord = d3.chord()
        .padAngle(0.1) // 设置弦之间的间隔
        .sortSubgroups(d3.descending); // 对弦进行排序

    const arc = d3.arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius);

    const ribbon = d3.ribbon()
        .radius(innerRadius);

    const color = d3.scaleOrdinal()
        .domain(d3.range(4))
        .range(["#000000", "#FFDD89", "#957244", "#F26223"]);

    const svg = d3.select("#chord-diagram")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", `translate(${width / 2},${height / 2})`);

    const chords = chord(matrix);

    svg.append("g")
        .attr("class", "ribbons")
        .selectAll("path")
        .data(chords)
        .enter().append("path")
        .attr("d", ribbon)
        .style("fill", d => color(d.target.index))
        .style("stroke", d => d3.rgb(color(d.target.index)).darker());

    svg.append("g")
        .attr("class", "groups")
        .selectAll("g")
        .data(chords.groups)
        .enter().append("g")
        .append("path")
        .attr("d", arc)
        .style("fill", d => color(d.index))
        .style("stroke", d => d3.rgb(color(d.index)).darker());

</script>
</body>
</html>